<template>
  <div class="dashboard">
      <div class="top">
        <div class="top-left">
          <div class="top-left-top">
            <div class="top-left-top-avatarbox">
              <img src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png" alt="">
              <p>仓储管理员</p>
            </div>
            <div class="top-left-top-rightimgbox">
              <div class="motto">
                <p>我不是为了赢,我就是认真!</p>
                <p style=" margin-left:150px">————罗永浩</p>
              </div>
              <div class="loaction">
                <p>北京总仓</p>
              </div>
            </div>
          </div>
          <div class="top-left-down">
            <p>代办信息</p>
            <div class="top-left-down-cards">
              <div class="cards">
                <div class="cards-top">
                  <svg  class="iconfont" style="width:50px;height:50px;padding:5px">
                      <use xlink:href="#icon-pandian"></use>
                  </svg>
                  <span>
                    {{todoinfo[0].name}}
                  </span>
                  </div>
                <div style="display:flex;align-items:center">
                  <div class="cards-down">新增</div><span style="font-size:36px;color:#332929;margin-right:10px">{{todoinfo[0].value1}}</span>
                  <div class="cards-down">待审核</div><span style="font-size:36px;color:#0076ff">{{todoinfo[0].value2}}</span>
                </div>
              </div>
               <div class="cards">
                <div class="cards-top">
                  <svg  class="iconfont" style="width:50px;height:50px;padding:5px">
                      <use xlink:href="#icon-pandian"></use>
                  </svg>
                  <span>
                    {{todoinfo[1].name}}
                  </span>
                  </div>
                <div style="display:flex;align-items:center">
                  <div class="cards-down">新增</div><span style="font-size:36px;color:#332929;margin-right:10px">{{todoinfo[1].value1}}</span>
                  <div class="cards-down">待审核</div><span style="font-size:36px;color:#0076ff">{{todoinfo[1].value2}}</span>
                </div>
              </div>
               <div class="cards">
                <div class="cards-top">
                  <svg  class="iconfont" style="width:50px;height:50px;padding:5px">
                      <use xlink:href="#icon-pandian"></use>
                  </svg>
                  <span>
                    {{todoinfo[2].name}}
                  </span>
                  </div>
                <div style="display:flex;align-items:center">
                  <div class="cards-down">新增</div><span style="font-size:36px;color:#332929;margin-right:10px">{{todoinfo[2].value1}}</span>
                  <div class="cards-down">待审核</div><span style="font-size:36px;color:#0076ff">{{todoinfo[2].value2}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="top-right">
          <p >通知/公告</p>
          <div class="message-item">
            <hr>
            <div>紧急盘点通知</div>
            <div>2020.12.30 18:23:14</div>
          </div>
          <div class="message-item">
            <hr>
            <div>紧急盘点通知</div>
            <div>2020.12.30 18:23:14</div>
          </div>
           <div class="message-item">
            <hr>
            <div>紧急盘点通知</div>
            <div>2020.12.30 18:23:14</div>
          </div>
           <div class="message-item">
            <hr>
            <div>紧急盘点通知</div>
            <div>2020.12.30 18:23:14</div>
          </div>

        </div>
      </div>
      <div class="TaskNavigation">
        <p>任务导航</p>
        <div class="tasks">
          <div class="task-item">
            <svg  class="iconfont" style="width:50px;height:50px;padding:5px;background-color:#1296db;border-radius:50%">
              <use xlink:href="#icon-huoche"></use>
            </svg>
            <span>收货任务</span>
          </div>
          <div class="task-item">
            <svg  class="iconfont" style="width:50px;height:50px;padding:5px;background-color:#2cb8c4;border-radius:50%">
              <use xlink:href="#icon-tiaobotongyongsvg"></use>
            </svg>
            <span>上架任务</span>
          </div>
          <div class="task-item">
            <svg  class="iconfont" style="width:50px;height:50px;padding:5px;background-color:#ff9d4d;border-radius:50%">
              <use xlink:href="#icon-rukubaobiao"></use>
            </svg>
            <span>盘点任务</span>
          </div>
          <div class="task-item">
            <svg  class="iconfont" style="width:50px;height:50px;padding:5px;background-color:#ff609e;border-radius:50%">
              <use xlink:href="#icon-jianhuo"></use>
            </svg>
            <span>拣货任务</span>
          </div>
          <div class="task-item">
            <svg  class="iconfont" style="width:50px;height:50px;padding:5px;background-color:#3689f5;border-radius:50%">
              <use xlink:href="#icon-daijiedan"></use>
            </svg>
            <span>交接任务</span>
          </div>
        </div>
      </div>
      <div class="ioinfo">
        <div class="ioinfo-top">
          <p>入库/出库信息</p>
          <div class="taggle" ref="father">
            <span data-id="w" @click="withoutOther" class="isactive">本周</span>
            <span data-id="e" @click="withoutOther" >本月</span>
            <span data-id="c" @click="withoutOther" >本年</span>
          </div>
        </div>
        <div class="ioinfo-echarts">
          <Echarts1 ref="echarts1"/>
        </div>
      </div>
       <div class="ioinfo2">
        <div class="echarts-item">
            <p class="title">库存使用情况</p>
            <div class="ioinfo2-echarts">
              <!-- echarts 2 -->
              <Echarts2/>
            </div>
        </div>
        <div class="echarts-item" style=" width:58%">
            <p class="title">库区使用情况</p>
            <div class="ioinfo2-echarts">
              <Echarts3/>
            </div>
        </div>
      </div>
  </div>
</template>

<script>
import Echarts1 from '@/views/dashboard/components/echarts1.vue'
import Echarts2 from '@/views/dashboard/components/echarts2.vue'
import Echarts3 from '@/views/dashboard/components/echarts3.vue'
import { todo } from '@/api/dashboard'
export default {
  components: {
    Echarts1, Echarts2, Echarts3
  },
  data () {
    return {
      todoinfo: [{}, {}, {}]
    }
  },
  mounted () {
    this.$refs.echarts1.week('w')
  },
  methods: {
    async withoutOther (e) {
      // console.log(e)
      this.$refs.echarts1.week(e.target.dataset.id)
      this.$refs.father.childNodes.forEach(item => {
        item.classList.remove('isactive')
      })
      e.target.classList.add('isactive')
    },
    async todo () {
      const { data } = await todo()
      // console.log(data)
      this.todoinfo = data
    }
  },
  created () {
    this.todo()
  }

}
</script>

<style lang="less" scoped>
.dashboard{
  //  background: #fdfafa;
  min-width: 100%;
  height: 100%;

  // box-shadow: -4px  -4px 20px gray;
  // box-shadow: 4px  4px 20px gray;
  // border-radius: 10px;

  .top{
    width: 100%;
    border-radius: 10px;
    // background-color: red;
    display: flex;
    justify-content: space-between;
    .top-left{
    flex-basis: 74.5%;
    height: 450px;
    // background-color: rgb(141, 18, 198);
    border-radius: 10px;
    .top-left-top{
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 148px;
      background: linear-gradient(270deg,#ffc771,#ffa634);
      border-radius: 10px;
      // .top-left-top-img1{
      //   width: 20%;
      //   height: 148px;
      //   position: absolute;
      //   left: 0;
      // }
      .top-left-top-rightimgbox{
        background: url(http://www-wms-java.itheima.net/img/dashboard-banner-right@2x.28195570.png) no-repeat ;
        background-size:60%;
        background-position: 300px 0;
        position: absolute;
        width: 80%;
        height: 148px;
        right: 0;
        display: flex;
        >.motto{
          margin-left:50px;
          width: 300px;
          height: 148px;
          display: flex;
          flex-direction: column;
          justify-content: center;
        p{
          font-size: 18px;
          color: #fff;
          line-height: 36px;
        }
        }
        >.loaction{
          position: absolute;
          right:30px;
          top: 20px;
          width: 147px;
          height: 40px;
          background-color: #f9ead7;
          border-radius: 10px;
          color:#332929;
          font-size: 14px;
          line-height: 40px;
          text-align: center;
        }
      }
      .top-left-top-avatarbox{
        position: absolute;
        top: -20%;
        left: -5%;
        width: 200px;
        height:200px;
        border-radius: 50% ;
        background:linear-gradient(270deg,#ffc564,#ffbf40);
          >img{
            position: absolute;
            top: 30%;
            left: 35%;
          }
          >p{
            position: absolute;
            top: 70%;
            left: 35%;
            color: #332929;
            font-size:16px;
          }
      }
    }
    .top-left-down{
      padding:20px;
      border-radius: 10px;
      margin-top: 20px;
      width: 100%;
      height: 282px;
      box-shadow: 3px 3px  10px gray;

      >p{
        font-size: 16px;
    font-weight: 600;
    color: #332929;
    line-height: 22px;

      }
      .top-left-down-cards{
        width: 100%;
        height: 186px;
        margin-top: 20px;
        // background-color: yellow;
        display: flex;
        justify-content:space-between;
        .cards{
          width: 30%;
          height: 186px;
          padding: 20px;
          background-color: #fbf7f7;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          border-radius: 10px;
          cursor: pointer;
          .cards-top{
            font-size: 16px;
            color: #332929;
            display: flex;
            align-self: flex-start;
            margin-left: 20px;
            align-items: center;
          }
          .cards-down{
            font-size: 14px;
            color: #887e7e;
            margin-right: 10px;
          }
        }
        .cards:hover{
          background-color: #fff;
          box-shadow: 3px 3px  10px rgb(184, 183, 183);
          transition:1s;
          // box-shadow: -3px -3px  10px gray;
        }
      }
    }
  }
  .top-right{
    flex-basis: 24.5%;
    height: 450px;
    padding: 30px;
    background-color: #fbf7f7;
    border-radius: 10px;
    box-shadow: 3px 3px  10px gray;
    p{
      font-size: 16px;
    font-weight: 600;
    color: #332929;
    line-height: 22px;
    }
    .message-item{
      margin-top: 15px;
      hr{
        width: 201px;
        height: 1px;
        color: #f5efee;
      }
      div{
        font-size: 13px;
        color: #332929;
        font-weight: 400;
        line-height: 18px;
        margin-top: 15px;
      }
    }
  }
  }
  .TaskNavigation{
    height: 188px;
    width: 100%;
    margin-top: 20px;
    padding: 25px;
    background-color: #fbf7f7;
    border-radius: 10px;
    box-shadow: 3px 3px  10px gray;
    p{
    font-size: 16px;
    font-weight: 600;
    color: #332929;
    line-height: 22px;
    }
    .tasks{
      margin-top: 20px;
      width: 100%;
      height: 93px;
      display: flex;
      justify-content: space-between;
      .task-item{
        width: 19%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        background-color: #fff;
        border-radius: 10px;
        cursor: pointer;
      }
        .task-item:hover{
          box-shadow: 3px 3px  10px gray;
          transition: 1s;
          }
    }
  }
  .ioinfo{
    height: 500px;
    width: 100%;
    margin-top: 20px;
    padding: 25px;
    background-color: #fbf7f7;
    border-radius: 10px;
    box-shadow: 3px 3px  10px gray;
    .ioinfo-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      p{
      font-size: 16px;
      font-family: PingFangSC-Semibold,PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
      }
      .taggle{
        width: 210px;
        height: 36px;
        border: 1px solid #dcdfe6;
        span{
          cursor: pointer;
          width: 70px;
          padding: 10px 20px;
          font-size: 14px;
          line-height: 36px;
        }
        span:nth-child(2){
          border-left:1px solid #dcdfe6;
          border-right:1px solid #dcdfe6;
        }
        .isactive{
          color:#fff;
          background-color:#ffb200
        }
      }
    }
  }
  .ioinfo2{
    height: 354px;
    width: 100%;
    margin-top: 20px;

    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    // box-shadow: 3px 3px  10px gray;
    // background-color: #fbf7f7;
    .echarts-item{
      padding: 25px;
      box-shadow: 3px 3px  10px gray;
      background-color: #fbf7f7;
      width: 40%;
      height:313px;
      border-radius: 12px;
      // box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
      .title{
      font-size: 16px;
      font-family: PingFangSC-Semibold,PingFang SC;
      font-weight: 600;
      color: #332929;
      line-height: 22px;
      }
      .ioinfo2-left-echarts{
      height: 280px;
      }
    }
  }

}
</style>
